import { Bubble } from '@ant-design/x';
import markdownit from 'markdown-it';

const md = markdownit({ html: true, breaks: true });

const renderMarkdown = (content) => (
    <div dangerouslySetInnerHTML={{ __html: md.render(content) }} />
);

const MdPreview = (props) => {
  return (
      <Bubble
        typing={props.typing}
        content={props.modelValue}
        messageRender={renderMarkdown}
      /> 
  );
};

export default MdPreview;